<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
    <title>软装到家</title>
    <style type="text/css">
    	.form-groups .form-input.upload {
	      background: url("${ctx}/res/img/icon/upload.jpg") left top/100% 100% no-repeat; 
	    }
	    
	    .my-uploadImg {
	    	width:120px;
	    	height:120px;
	    }
	    
	    .layui-layer-dialog .layui-layer-content {
			color:black;
		}
	    
    </style>
</head>
<body>
<div class="simple-nav reg-nav">
	<div class=" w-1200 margin-0-auto">
    	<img class="fl reg-logo" src="${ctx }/res/img/icon/reg-factory-logo.png">
    </div>
</div>
<div class="factory-reg-body">
<form id='registerForm' method="post">
<div class="w-1200 margin-0-auto" style="overflow:hidden">
    <div class="form-groups factory-reg-m">
        <h3 class="form-groups-title">公司信息</h3>
        <div class="form-controller">
            <label class="form-label icon-required">工厂名称:</label>
            <input class="form-input" name="companyName" required>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">工厂所在地:</label>
             <select class="form-input" name="province.id" id="provinceId" required>
	            	<option value="">请选择省份</option>
	                <c:forEach items="${provinces }" var="p">
						<option value="${p.id }">${p.name }</option>
					</c:forEach>
	            </select>
	            <select class="form-input" name="city.id" id="cityId" required>
	                <option value="">请选择城市</option>
	            </select>
	            <select class="form-input" name="district.id" id="districtId">
	                <option value="">请选择区县</option>
	            </select>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">工厂规模:</label>
            <select class="form-input" name="companySize">
                <option value="">请选择</option>
                <option value="100以下">100人以下</option>
                <option value="100以上">100人以上</option>
            </select>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">联系人:</label>
            <input class="form-input" name="realName" required>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">联系人电话:</label>
            <input class="form-input" name="mobile" required>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required" id="images">产品图片上传:</label>
            <label class="upload form-input" style="border:none" id="imageLabel"><input type="file" onchange="onImageUploade(this)"></label>
        </div>
        <div class="form-controller">
            <label class="form-label">备注:</label>
            <textarea class="form-input remark" maxlength="100" rows="30" cols="50" style="width: 430px;height: 180px;" name="remark"></textarea>
            <label class="factory-reg-label"><em>0</em>/100</label>
        </div>
        <div class="form-controller">
            <button class=" btn btn-primary submit1" onclick="return form_submit();">提交资料</button>
        </div>
   </div>
</div>
</form>
</div>
<%@include file="../foot.jsp" %>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
    }); 
    
    function onImageUploade(input) {
    	var fd = new FormData();
    	fd.append("image", input.files[0]);
    	
    	$.ajax({
    		url: "${ctx}/image/upload7",
    		type: "POST",
    		processData: false,
    		contentType: false,
    		data: fd,
    		success: function(imageUrl) {
    			var image = '<image class="my-uploadImg" src="' + imageUrl + '"/>';
    			$('#imageLabel').after(image);
    		}
    	});
    }
    
    function form_submit() {
    	var arr = new Array();
    	$('#images').parent().find('img').each(function() {
    		arr.push($(this).attr('src'));
    	});
    	var images = arr.join(',');
    	info = $('#registerForm').serializeArray();
    	var json = {};
    	for(var i = 0;i < info.length; i ++ ) {
    		var theArr = info[i];
    		var key = theArr.name;
    		var value = theArr.value;
    		json[key] = value;
    	} 
    	json["images"] = images;
    	$.ajax({
    		url: "${ctx}/user/doFactoryReg",
    		data:json,
    		dataType: "json",
    		type: "get",
    		success: function(data) {
    			if (data.success) {
    				//loading带文字
    				layer.msg('提交成功，正在进行跳转...',{time: 5000, icon:6,shade: [0.5, '#f5f5f5']});
    				var userId = data.userId;    
    				location.href = '${ctx}';
    			} else {
    				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
    			}
    		}
    	});
    	return false;
    }
    
    $('#provinceId').change(function() {
    	var provinceId = $(this).val();
    	$('#cityId').html('');
    	$('#districtId').html('');
    	if (provinceId != '') {
    		$.ajax({
    			url: "${ctx}/user/findArea?provinceId=" + provinceId,
    			dataType: "json",
    			success: function(array) {
    				$('#cityId').append('<option value="">城市</option>');
    				for (var i = 0; i < array.length; i++) {
    					var obj = array[i];
    					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
    					$('#cityId').append(option);	
    				}
    			}
    		});
    	}
    });

    $('#cityId').change(function() {
    	var cityId = $(this).val();
    	$('#districtId').html('');
    	if (cityId != '') {
    		$.ajax({
    			url: "${ctx}/user/findArea?cityId=" + cityId,
    			dataType: "json",
    			success: function(array) {
    				$('#districtId').append('<option value="">地区</option>');
    				for (var i = 0; i < array.length; i++) {
    					var obj = array[i];
    					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
    					$('#districtId').append(option);	
    				}
    			}
    		});
    	}
    });
</script>
</body>
</html>
